<template>
  <div id="regional_agency">
    <c-title class="circle_title" :hide="false" :text="'区域代理招商'"></c-title>
    <header class="header">
      <div class="header-content">
        <img :src="avatar_image" alt="" />
        <h3 class="nick-name">{{ nickname }}</h3>
      </div>
    </header>
    <main class="main">
      <van-cell :title="`我的区域代理（${agent_count}人）`" is-link :to="{ path: '/RegionalAgency/MyAgency', query: $route.query }" value="" />
      <van-cell title="累计分红金额：">
        <div slot="default" class="price">￥{{ grand_amount }}</div>
      </van-cell>
    </main>
    <footer class="footer">
      <van-tabs v-model="active">
        <van-tab title="分红">
          <ul class="footer-content">
            <li v-for="(item, index) in list" :key="index">
              <div class="left">
                <div class="title">{{ item.order_sn }}</div>
                <div class="time">时间：{{ item.created_at }}</div>
              </div>
              <div class="right">￥{{ item.amount }}</div>
            </li>
          </ul></van-tab
        >
      </van-tabs>
    </footer>
  </div>
</template>

<script>
import { scrollMixin } from "../../../utils/mixin"; //引入加载更多
import { Toast } from "vant";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      nickname: "",
      avatar_image: "",
      agent_count: "",
      grand_amount: "",
      page: 1,
      isLoadMore: true,
      last_page: 1,
      list: []
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    getData() {
      $http.post("plugin.area-merchant.frontend.modules.bonus.controllers.records.index").then(res => {
        if (res.result == 1) {
          let { data, current_page, last_page } = res.data.page_list,
            { nickname, avatar_image, agent_count, grand_amount } = res.data;
          this.nickname = nickname;
          this.avatar_image = avatar_image;
          this.agent_count = agent_count;
          this.grand_amount = grand_amount;
          this.list = data;
          this.page = current_page;
          this.last_page = last_page;
        } else {
          Toast(res.msg);
        }
      });
    },
    getMoreData() {
      this.isLoadMore = false;
      if (this.page >= this.last_page) {
        return;
      } else {
        this.page = this.page + 1;
        $http
          .post("plugin.area-merchant.frontend.modules.bonus.controllers.records.index", { page: this.page })
          .then(res => {
            let { data, last_page } = res.data.page_list;
            this.isLoadMore = true;
            if (res.result == 1) {
              this.last_page = last_page;
              this.list = this.list.concat(data);
            } else {
              this.page = this.page - 1;
              this.isLoadMore = false;
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.price {
  color: #f15353;
}

.footer {
  margin-top: 1rem;
  background: #fff;

  li {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;

    &::after {
      content: "";
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 0;
      width: 21.5rem;
      height: 0.1rem;
      background: #ebebeb;
    }
  }

  li:last-child {
    &::after {
      content: "";
      background: #fff;
    }
  }

  .left {
    text-align: left;
  }

  .right {
    color: #f15353;
  }

  .time {
    margin-top: 0.35rem;
    color: #8c8c8c;
  }
}

img {
  margin-left: 0;
  margin-right: 0;
}

.header {
  background-color: #ee2e2b;

  &-content {
    padding-top: 2rem;
    padding-bottom: 2rem;
    display: flex;

    img {
      width: 3rem;
      height: 3rem;
      border-radius: 100px;
      margin-right: 1rem;
      margin-left: 2rem;
    }

    .nick-name {
      color: #fff;
    }
  }
}

.main {
  .van-cell__title {
    text-align: left;
  }
}
</style>
